.login{
  width: 332px;
  height: 386px;
  color: #9f9f9f;
  min-width: 332px;
  max-width: 100%;
  max-height: 386px;
  display: table-cell;
  text-align: center;
  position: relative;
  border-radius: 10px;
  border: solid 1px #b7b7b7;
  background-color: white;

  h2{
    font-size: 20px;
    line-height: 50px;
    margin-top: 20px;

    span{
      width: 60px;
      padding-bottom: 5px;
      display: inline-block;
      border-top: solid 1px #9f9f9f;
    }

    span.title{
      width: auto;
      border: none;
      padding: 0;
      margin: 0 20px;
      line-height: 50px;
    }
  }

  .inputs{
    width: 80%;
    margin: 20px auto 0;
    position: relative;

    .username,
    .password{
      width: 100%;
      height: 40px;
      color: #9f9f9f;
      display: block;
      line-height: 40px;
      font-size: 16px;
      margin: 5px auto 0;
      position: relative;
      outline: none;
      border-radius: 5px;
      border: solid 1px #b7b7b7;
      text-indent: 20px;
    }

    .remember{
      float:left;
      margin-top: 10px;
      font-size: 14px;
      span{
        padding: 0 5px;
      }
    }

    a.forget{
      font-size: 14px;
      float: right;
      margin-top: 10px;
      color: #00a7de;
      text-decoration: none;
    }
  }

  .inputs:after{
    clear: both;
    content: "";
    display: block;
  }


  .btn-login,
  .btn-fb{
    width: 75%;
    height: 40px;
    line-height: 40px;
    display: block;
    margin: 20px auto 0;
    text-decoration: none;
    text-align: center;
    position: relative;
    border-radius: 40px;
    color: white;
    font-size: 14px;
    cursor: pointer;
  }

  .btn-login{
    background: #00a7de;
  }

  .btn-fb{
    background: #528ade;
  }
}

@media screen and (max-width: 720px) {
  .login {
    display: block;
    margin: 0 auto;
  }
}